<template>
  <view class="content">
    <!-- 自定义首页导航栏 -->
    <CustomNavbar></CustomNavbar>

    <scroll-view scroll-y class="scroll-view"
    @scrolltolower="scrollToBottom"
    :refresher-enabled="true"
    @refresherrefresh="refreshData"
    :refresher-triggered="isRefreshing">

      <!-- 骨架屏 -->
      <PageSkeleton v-if="isPageLoading"></PageSkeleton>

      <template v-else>
        <view>
          <!-- 自定义轮播图组件 -->
          <BasicSwiper :list="bannerList"></BasicSwiper> 
        </view>
    
        <!-- 首页分类组件 -->
         <CategoryPanel :list="categoryList"></CategoryPanel>
    
         <!-- 首页热门推荐 -->
          <HotPanel :list="hotList"></HotPanel>
    
          <!-- 首页猜你喜欢 -->
          <BasicGuess ref="guessRef"></BasicGuess>
      </template>
      
    </scroll-view>
    
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useCounterStore} from '@/stores/counter'
import { useMemberStore } from '@/stores'
import * as CustomNavbar from './components/CustomNavbar.vue'
import { getHomeBannerHttp, getHomeCategoryHttp, getHotHttp } from '@/services/homeService';
import { onLoad } from '@dcloudio/uni-app';
import type { BannerItem, CategoryItem, HotItem } from '@/types/home';
// import BasicSwiper from '@/components/BasicSwiper.vue'
import CategoryPanel from './components/CategoryPanel.vue';
import HotPanel from './components/HotPanel.vue';
import type {BasicGuessInstance} from '@/components/components';
import PageSkeleton from './components/PageSkeleton.vue'

const title = ref('Hello uni-app')

const counter = useCounterStore()
const member = useMemberStore()
console.log('pinia是否可以使用member：',member);
console.log('pinia是否可以使用member2：',member.profile);
console.log('pinia是否可以使用：',counter);
console.log('pinia是否可以使用：',counter.count);

counter.count++ // 直接访问和修改state

counter.increment(3) // 直接调用actions（method）
console.log('pinia是否可以使用2：',counter.count);

const bannerList = ref<BannerItem[]>([])
// const bannerList:BannerItem[]|[] = ref([])
const getHomeBanner = async ()=>{
  let res = await getHomeBannerHttp(1) //调用接口
  console.log('轮播图res：',res);
  bannerList.value = res.result
  
}
// 获取首页category
const categoryList = ref<CategoryItem[]>([])
const getCategoryList = async ()=>{
  let res = await getHomeCategoryHttp()
  console.log('首页分类',res);
  categoryList.value = res.result||[]
  
}

// 获取hot模块
const hotList = ref<HotItem[]>([])
const getHotList = async ()=>{
  let res = await getHotHttp()
  console.log('hot模块res：',res);
  hotList.value = res.result||[]
  
}

// 触底事件
const guessRef = ref<BasicGuessInstance>() // 子组件实例。
const scrollToBottom = ()=>{
  console.log('触底');
  console.log('触底ref:',guessRef);
  guessRef.value?.getMore()
  
}


/**
 * 下拉刷新
 */
const  isRefreshing = ref(false)
const refreshData = async ()=>{
  isRefreshing.value = true
  console.log('下拉刷新');

  // await getHomeBanner()
  // await getCategoryList()
  // await getHotList()

  guessRef.value?.resetData()
  await Promise.all([
    getHomeBanner(),
    getCategoryList(),
    getHotList(),
    guessRef.value?.getMore()
  ])
  
  isRefreshing.value = false
}

const isPageLoading = ref(false)
onLoad(async ()=>{
  isPageLoading.value = true

  await Promise.all([
    getHomeBanner(),
    getCategoryList(),
    getHotList(),
     // 猜你喜欢在组件内调用的
  ])
  
  isPageLoading.value = false
})

</script>

<style lang="scss">
page{
  background: #f7f7f7;

  height: 100%;
  .content{
    display: flex;
    flex-direction: column;
    height: 100%;
    .scroll-view{
      flex:1;
      overflow: hidden;
    }
  }
}

</style>
